<template>
  <a-spin :spinning="loading">
    <a-card style="margin-top: 12px" :bordered="false" title="科研">
      <div slot="extra">
        总分: <i style='font-style: normal;color: rgba(0, 0, 0, 0.85);font-weight: 500;font-size: 16px;'>{{ score.score }}</i>
        <a-button style="margin-left: 20px" :icon="this.getIconShow" @click="showButtomShow"> {{ this.getButtomShow }}</a-button>
      </div>
      <div v-show="isShow">
        <a-list size="small" >
          <result-list-item-research v-for="item in items" :data="item"></result-list-item-research>
        </a-list>
      </div>
      <template slot="actions">
        <teacher-result-ranking :schoolRanking="score.shcoolRanked" :schoolTotal="teacherCount.schoolTeacherCount" :depRanking="score.orgRanked" :depTotal="teacherCount.orgTeacherCount"></teacher-result-ranking>
      </template>
    </a-card>
  </a-spin>
</template>

<script>
import { getAction } from '@api/manage'
import ResultListItemResearch from '@views/gfxy/result/modules/ResultListItemResearch'
import teacherResultRanking from '@views/gfxy/result/modules/teacherResultRanking'

export default {
  name: 'teacherResultResearch',
  components: { ResultListItemResearch, teacherResultRanking },
  props: {
    userName: {
      type: String,
      required: true
    },
    date: {
      type: String,
      required: true
    },
    teacherCount: {
      type: Object,
      required: true
    },
    score:{
      type: Object,
      required: true
    },
  },
  data() {
    return {
      isShow:false,
      url: {
        detail: '/research/researchCommon/researchProjectsResult'
      },
      totalInfo: {},
      items: [],
      loading: false
    }
  },
  computed:{
    getButtomShow(){
      if(this.isShow){
        return "隐藏详情"
      } else {
        return "显示详情"
      }
    },
    getIconShow(){
      if(this.isShow){
        return "up-circle"
      } else {
        return "down-circle"
      }
    }
  },
  methods: {
    showButtomShow(){
      this.isShow = !this.isShow
    },
    load() {

      this.loading = true
      getAction(this.url.detail, { workNo: this.userName, date: this.date }).then((res) => {

        if (res.success) {
          this.items = res.result

        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      }).finally(() => {

      })
    },

  },
  mounted() {

    this.load()
  }
}
</script>

<style lang="less" scoped>
.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
</style>